<template>
	<div style="display: inline-block;">
		<typeGroup :name="data.name" @edit="showEdit()" @delete="deleteRow()">
			<groupTextDetail :data="data" @change="changeValue"></groupTextDetail>
	  </typeGroup>

	  <el-dialog
	    v-model="dialog.visible"
	    width="800px"
	    draggable>
	    <template #header>
	    	<div style="color: #fff">文本配置</div>
	    </template>
	    <el-form>
	    	<el-form-item label="文本名称：">
	    		<el-input v-model="dialog.form.text"/>
	    	</el-form-item>
	    	<el-form-item label="文本样式：">
	    		<el-input v-model="dialog.form.style" type="textarea" :rows="5" placeholder="请输入"/>
	    	</el-form-item>
	    	<el-form-item label="onMounted：">
	    		<wordFunctionEditor v-model="dialog.form.onMounted"></wordFunctionEditor>
	    	</el-form-item>
	    </el-form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialog.visible = false">关闭</el-button>
	        <el-button type="primary" @click="saveData()">确定</el-button>
	      </span>
	    </template>
	  </el-dialog>
	</div>
	  
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import typeGroup from "./type-group.vue";
	import groupTextDetail from "./group-text-detail.vue";
	import wordFunctionEditor from "./wordFunctionEditor.vue";
	import {TRANS_STYLE} from "../components.js";

	const emits = defineEmits(['delete', 'change']);
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})

	const _d = reactive({

	})

	const dialog = reactive({
		visible: false,
		form: {
			text: '',
			style: '',
		}
	})
	
	onMounted(() => {
	
	})

	function showEdit() {
		dialog.form.text = props.data.attr.text;
		dialog.form.style = TRANS_STYLE.jsonToString(props.data.attr.style);
		dialog.form.onMounted = props.data.attr.onMounted;
		dialog.visible = true;
	}

	function saveData() {
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.text = dialog.form.text;
		data.attr.style = TRANS_STYLE.stringToJson(dialog.form.style);
		data.attr.onMounted = dialog.form.onMounted;
		emits('change', data);
	}

	function deleteRow() {
		emits('delete');
	}

	function changeValue(val) {
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.text = val;
		emits('change', data);
	}
	
</script>